<template>
  <view class="difficulty-select-page">
    <view class="header">
      <text class="title">选择难度</text>
      <button class="back-btn" @click="navigateBack">
        <text class="icon">←</text> 返回首页
      </button>
    </view>
    
    <view class="difficulty-list">
      <view 
        class="difficulty-card" 
        :class="{ selected: currentDifficulty === 'easy' }"
        @click="selectDifficulty('easy')"
      >
        <view class="icon">😊</view>
        <text class="name">简单</text>
        <text class="desc">6×6网格，3-4种颜色</text>
        <text class="unlocked">已解锁至第 {{ unlockedLevels.easy || 1 }} 关</text>
      </view>
      
      <view 
        class="difficulty-card" 
        :class="{ selected: currentDifficulty === 'medium' }"
        @click="selectDifficulty('medium')"
      >
        <view class="icon">😐</view>
        <text class="name">中等</text>
        <text class="desc">8×8网格，5-6种颜色</text>
        <text class="unlocked">已解锁至第 {{ unlockedLevels.medium || 1 }} 关</text>
      </view>
      
      <view 
        class="difficulty-card" 
        :class="{ selected: currentDifficulty === 'hard' }"
        @click="selectDifficulty('hard')"
      >
        <view class="icon">😠</view>
        <text class="name">困难</text>
        <text class="desc">10×10网格，7-8种颜色</text>
        <text class="unlocked">已解锁至第 {{ unlockedLevels.hard || 1 }} 关</text>
      </view>
    </view>
    
    <button class="start-btn" @click="navigateToLevelSelect">
      选择关卡
    </button>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { useGameStore } from '@/store/game'

const gameStore = useGameStore()

// 当前选择的难度
const currentDifficulty = computed({
  get: () => gameStore.currentDifficulty,
  set: (value) => { gameStore.currentDifficulty = value }
})

// 已解锁关卡
const unlockedLevels = computed(() => gameStore.unlockedLevels)

// 选择难度
const selectDifficulty = (difficulty) => {
  currentDifficulty.value = difficulty
}

// 导航到关卡选择
const navigateToLevelSelect = () => {
  uni.navigateTo({
    url: `/pages/level-select/level-select?difficulty=${currentDifficulty.value}`
  })
}

// 返回首页
const navigateBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.difficulty-select-page {
  background-color: #1a1a2e;
  min-height: 100vh;
  padding: 24rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.back-btn {
  background-color: #333;
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 8rpx;
}

.difficulty-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-bottom: 48rpx;
}

.difficulty-card {
  background-color: rgba(30, 30, 50, 0.5);
  border-radius: 16rpx;
  padding: 32rpx;
  cursor: pointer;
  transition: all 0.3s;
  border: 2rpx solid transparent;
}

.difficulty-card.selected {
  border-color: #6C5CE7;
  background-color: rgba(108, 92, 231, 0.1);
  box-shadow: 0 0 15rpx rgba(108, 92, 231, 0.2);
}

.difficulty-card .icon {
  font-size: 64rpx;
  margin-bottom: 16rpx;
  display: inline-block;
}

.difficulty-card .name {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 8rpx;
}

.difficulty-card .desc {
  font-size: 26rpx;
  color: #aaa;
  margin-bottom: 12rpx;
  display: block;
}

.difficulty-card .unlocked {
  font-size: 24rpx;
  color: #6C5CE7;
  display: block;
}

.start-btn {
  width: 100%;
  background-color: #6C5CE7;
  color: #fff;
  padding: 24rpx;
  border-radius: 16rpx;
  font-size: 36rpx;
  font-weight: bold;
}
</style>